import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:image_picker/image_picker.dart';
import 'package:travel/screen/flutter_screenutil.dart';
import 'package:travel/utils/colors.dart';
import 'package:travel/utils/radian.dart';
import 'package:travel/utils/styles.dart';
import 'package:travel/utils/tools.dart';

class CommentController extends GetxController {
  RxString comment = RxString('');
  RxList<String> tags = RxList([]);
  RxList<XFile> imgs = RxList([]);
  RxBool ok = RxBool(true);

  @override
  void onInit() {
    super.onInit();
    for (var i = 0; i < 5; i++) {
      tags.add('u998_selected.svg');
    }
  }
}

class CommentView extends GetView<CommentController> {
  const CommentView({super.key});

  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          backgroundColor: ColorsUtils.backgroundColor,
          appBar: AppBar(
            automaticallyImplyLeading: true,
            backgroundColor: Colors.white,
            leading: InkWell(
              onTap: () {
                Get.back();
              },
              child: Icon(
                Icons.arrow_back_ios,
                color: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                size: 20.w,
              ),
            ),
            leadingWidth: 40.w,
            title: Text(
              '评论',
              style: StylesUtils.customTextStyle(fontSize: 18.sp, color: ColorsUtils.color0000),
            ),
            actions: [
              InkWell(
                onTap: () {
                  Get.back();
                },
                child: Container(
                  constraints: BoxConstraints.expand(width: 60.w, height: 30.h),
                  margin: EdgeInsets.only(left: 15.w, right: 10.w),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(15.w),
                      gradient: LinearGradient(colors: [
                        ColorsUtils.rgba(52, 120, 246, 1),
                        ColorsUtils.rgba(2, 167, 240, 1)
                      ], stops: const <double>[
                        0,
                        0.99
                      ], transform: GradientRotation(RadianUtils.angleToRadian(90)))),
                  child:
                      Text('发表', style: StylesUtils.customTextStyle(color: ColorsUtils.colorFfff)),
                ),
              )
            ],
          ),
          body: SingleChildScrollView(
            padding: EdgeInsets.all(15.w),
            child: Column(
              children: [
                Container(
                  decoration:
                      BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10.w)),
                  padding: EdgeInsets.all(10.w),
                  child: ListBody(
                    children: [
                      Container(
                          alignment: Alignment.centerLeft,
                          child: Row(
                            children: [
                              ClipRRect(
                                  borderRadius: BorderRadius.circular(5.w),
                                  child: ToolsUtils.image('result.png', width: 40.w, height: 40.h)),
                              Text(
                                '  故宫博物馆',
                                style: StylesUtils.customTextStyle(
                                    color: ColorsUtils.color3333, fontSize: 16.sp),
                              ),
                            ],
                          )),
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.symmetric(vertical: 10.w),
                        child: Row(
                          children: [
                            Text('评分：',
                                style: StylesUtils.customTextStyle(
                                    fontSize: 15.sp, color: ColorsUtils.color3333)),
                            Wrap(
                              spacing: 5.w,
                              runAlignment: WrapAlignment.center,
                              children: controller.tags
                                  .map((name) =>
                                      ToolsUtils.assetImageSvg(name, width: 23.w, height: 22.h))
                                  .toList(),
                            ),
                            Text(
                              '  非常好',
                              style: StylesUtils.customTextStyle(
                                  fontSize: 15.sp, color: ColorsUtils.color3333),
                            )
                          ],
                        ),
                      ),
                      Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(5.w),
                            color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2)),
                        padding: EdgeInsets.all(10.w),
                        child: TextField(
                          // 新增保持光标一直在文字最后
                          controller: ToolsUtils.editingController(controller.comment.value),
                          cursorRadius: const Radius.circular(2),
                          cursorColor: ColorsUtils.parseColorFromHexString(ColorsUtils.color3333),
                          keyboardType: TextInputType.multiline,
                          maxLength: 200,
                          maxLengthEnforcement: MaxLengthEnforcement.enforced,
                          autofocus: false,
                          maxLines: 20,
                          minLines: 5,
                          textAlign: TextAlign.left,
                          textInputAction: TextInputAction.none,
                          style: StylesUtils.customTextStyle(
                              color: ColorsUtils.color3333, fontSize: 15.sp),
                          buildCounter: (
                            BuildContext context, {
                            required int currentLength,
                            required int? maxLength,
                            required bool isFocused,
                          }) {
                            return Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: <Widget>[
                                Text(
                                  '$currentLength',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.colorD900, fontSize: 12.sp),
                                ),
                                Text(
                                  '/$maxLength',
                                  style: StylesUtils.customTextStyle(
                                      color: ColorsUtils.color9999, fontSize: 12.sp),
                                ),
                              ],
                            );
                          },
                          decoration: InputDecoration(
                            hintText: '这里值得去吗？有什么亮点',
                            hintMaxLines: 1,
                            hintStyle: StylesUtils.customTextStyle(
                                color: ColorsUtils.color9999, fontSize: 15.sp),
                            contentPadding: EdgeInsets.zero,
                            border: InputBorder.none,
                            isDense: true,
                            enabledBorder: const UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.transparent)),
                            focusedBorder: const UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.transparent)),
                          ),
                          onChanged: (String text) {
                            controller.comment.value = text;
                          },
                        ),
                      ),
                      Container(
                        alignment: Alignment.topLeft,
                        padding: EdgeInsets.only(top: 10.h),
                        child: Row(
                          children: [
                            InkWell(
                              onTap: () async {
                                List<XFile> imgs = await ToolsUtils.loadGalleryImage();
                                if (imgs.isNotEmpty) {
                                  controller.imgs.addAll(imgs);
                                }
                              },
                              child: Container(
                                width: 70.w,
                                height: 70.h,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(1),
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.colorF5f5)),
                                child: Icon(
                                  Icons.camera_alt_rounded,
                                  size: 20.w,
                                  color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorCccc),
                                ),
                              ),
                            ),
                            Expanded(
                                child: Container(
                              alignment: Alignment.topLeft,
                              padding: EdgeInsets.only(left: 5.w),
                              child: Text(
                                '上传图片或视频能让更多人看到你的点评哦~',
                                style: StylesUtils.customTextStyle(
                                    fontSize: 15.sp,
                                    color: ColorsUtils.colorCccc,
                                    lineHeight: 1.5.h),
                              ),
                            ))
                          ],
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        padding: EdgeInsets.only(top: 10.h),
                        child: Wrap(
                          spacing: 10.w,
                          runSpacing: 10.h,
                          children: controller.imgs
                              .map((element) => Stack(
                                    children: [
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(8.w),
                                        child: Container(
                                          width: 100.w,
                                          height: 100.h,
                                          decoration: BoxDecoration(
                                              image: DecorationImage(
                                            image: FileImage(File(element.path)),
                                          )),
                                        ),
                                      ),
                                      Positioned(
                                          top: 0,
                                          right: 0,
                                          width: 20,
                                          height: 20,
                                          child: IconButton(
                                              alignment: Alignment.center,
                                              padding: EdgeInsets.zero,
                                              splashRadius: 10,
                                              onPressed: () {
                                                controller.imgs.remove(element);
                                              },
                                              icon: Icon(
                                                Icons.delete,
                                                color: ColorsUtils.parseColorFromHexString(
                                                    ColorsUtils.color3333),
                                                size: 15.w,
                                              )))
                                    ],
                                  ))
                              .toList(),
                        ),
                      ),
                      Container(
                        alignment: Alignment.centerLeft,
                        child: Row(
                          children: [
                            Checkbox(
                                value: controller.ok.value,
                                splashRadius: 8.w,
                                shape: const OvalBorder(),
                                side: BorderSide(
                                    color:
                                        ColorsUtils.parseColorFromHexString(ColorsUtils.color3478)),
                                activeColor:
                                    ColorsUtils.parseColorFromHexString(ColorsUtils.color3478),
                                onChanged: (bool? value) {
                                  controller.ok.value = value!;
                                }),
                            Text(
                              '公开昵称',
                              style: StylesUtils.customTextStyle(
                                  color: ColorsUtils.color6666, fontSize: 16.sp),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
        ));
  }
}
